<template>
	<view class="navigation">
		<eui-navbar ref="EuiNavBar" title="余额明细" displayable="true" color="#000000" backgroundColor="#FFFFFF"
			rightIcon="" />
		<view class="m-card-input-view2">
			<view class="m-card-input-title2">
				<text class="m-title-text2">日期</text>
			</view>
			<view class="time-view">
				<eui-datetime-picker v-model="daterange" type="daterange" @change="changedate" rangeSeparator="-" />
			</view>
		</view>
		<view class="main-view">
			<scroll-view :style="{width:scrollWidth,height:scrollHeight}" scroll-y @scrolltolower="templateLower"
				@refresherrefresh="onRefresh" :refresher-enabled='true' :refresher-triggered="triggered">
				<view class="approve-list flex flex-direction-column font-size-28 margin-bottom-20"
					v-for="(item,index) in dataList" :key="index">
					<eui-card>
						<view class="title">
							<view class="twice">
								<view class="titletext">[{{item.strStoreId}}]{{item.strStoreName}}</view>
							</view>
							<view v-if="item.decAmount>=0" class="numadd">
								+{{item.decAmount}}
							</view>
							<view v-else class="numcut">
								{{item.decAmount}}
							</view>
						</view>
						<view class="consumeitem">
							<view class="twice">
								<view class="custtitle">卡号</view>
								<view class="consumetext">{{item.strCardNo}}</view>
							</view>
							<view class="accounttext">{{item.strDepositType}}</view>
						</view>
						<view class="consumeitem">
							<view class="custtitle">消费时间</view>
							<view class="consumetext">{{dayjs(item.dtDate).format('YYYY-MM-DD HH:mm:ss')}}</view>
						</view>
						<view class="consumeitem">
							<view class="custtitle">变动后余额</view>
							<view class="consumetext">{{getNumValue(item.decNewAmount)}}</view>
						</view>
						<view class="scoreinfo">
							<view class="consumeitem" style="width: 300rpx;">
								<view class="custtitle">渠道</view>
								<view class="consumetext">{{item.strChannel}}</view>
							</view>
							<view class="consumeitem" style="width: 330rpx;" v-if="item.strID">
								<view class="custtitle">关联单号</view>
								<view class="consumetext">{{item.strID}}</view>
							</view>
						</view>
					</eui-card>
				</view>
				<view v-if="dataList.length == 0" class="no-data nodata" style="background-color: RGBA(255,255,255,0);">
					<image src="@/static/img/no_data.png" mode="aspectFit" class="image" />
					<view class="color-888 font-size-28">暂无数据</view>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script setup lang="js">
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		computed,
		onMounted,
		ref
	} from "vue";
	import {
		getCrmUrl,
		crmRequest,
		crmRequestAsync
	} from '@/hooks/crmServices';
	import {
		useMainStore
	} from "@/store/modules/store";
	import service from '@/common/service';
	const mainStore = useMainStore();
	const {
		loginInfo
	} = mainStore;
	import dayjs from "dayjs";
	import dateRangUtil from '../../../common/dateRangUtil';
	const scrollWidth = ref(uni.getSystemInfoSync().windowWidth + 'px');
	const scrollHeight = ref(uni.getSystemInfoSync().windowHeight + 'px');
	const startdate = ref(dayjs().subtract(1, "M").format("YYYY-MM-DD"));
	const enddate = ref(dayjs().format("YYYY-MM-DD"));
	const daterange = [startdate.value, enddate.value];
	const customerno = ref('');
	const cardno = ref('');
	const depositType = ref('');
	const crmUrl = getCrmUrl();
	const dataList = ref([]);
	const PageSize = ref(10);
	const pageList = ref({
		iStartRow: 1,
		iEndRow: PageSize.value,
		iCount: 0,
	});
	const triggered = ref(false);
	// 获取列表高度
	onReady(() => {
		uni.getSystemInfo({
			success: function(res) {
				const userInfoPage = uni.createSelectorQuery().select(".m-card-input-view2");
				userInfoPage.boundingClientRect(function(data) {
					scrollHeight.value = (res.windowHeight - data.height - 50) + 'px';
				}).exec()
			}
		});
	})
	// 下拉刷新
	const onRefresh = () => {
		if (triggered.value) {
			return false;
		};
		triggered.value = true;

		pageList.value.iStartRow = 1;
		pageList.value.iEndRow = PageSize.value;
		pageList.value.iCount = 0;
		dataList.value = [];
		getData();

		setTimeout(() => {
			triggered.value = false;
		}, 1000)
	}
	// 加载更多
	const templateLower = () => {
		console.log('加载更多')
		console.log(dataList.value.length)
		if (dataList.value.length < pageList.value.iCount) {
			pageList.value.iStartRow = pageList.value.iStartRow + PageSize.value;
			pageList.value.iEndRow = pageList.value.iEndRow + PageSize.value;
			getData();
		}
	}
	// 显示数值
	const getNumValue = (value, precision = 2) => {
		return value ? parseFloat(value).toFixed(precision) : (0).toFixed(precision)
	}
	//时间变化
	const changedate = async (e) => {
		if (e) {
			startdate.value = e[0]
			enddate.value = e[1]
		}
		pageList.value.iStartRow = 1;
		pageList.value.iEndRow = PageSize.value;
		pageList.value.iCount = 0;
		dataList.value = [];
		await getData();
	}
	const getData = async () => {
		var req = {
			strCardNo: cardno.value,
			strCustomerNo: customerno.value,
			dtStartDate: startdate.value,
			dtEndDate: enddate.value,
			iStartRow: pageList.value.iStartRow,
			iEndRow: pageList.value.iEndRow,
			strDepositType: depositType.value
		}
		console.log('dreq')
		console.log(req)
		uni.showLoading({
			title: "查询中...",
			mask: true
		});
		const rspdata = await crmRequestAsync(crmUrl.crmApi, '/crm/CustomerViewService', 'GetDepositListPage',
		req);
		uni.hideLoading();
		console.log('dgetData')
		console.log(rspdata)
		if (rspdata && rspdata.ObjectData) {
			pageList.value.iCount = rspdata.ObjectData.iSumCount
			if (rspdata.ObjectData.lstDeposits.length > 0) {
				rspdata.ObjectData.lstDeposits.map((item, index) => {
					dataList.value.push({
						...item,
					});
				})
			}
		}
	}
	onLoad(e => {
		console.log("e: " + JSON.stringify(e));
		customerno.value = e.custno
		cardno.value = e.cardno;
		depositType.value = e.depositType;
		getData();
	})
</script>

<style scoped lang="scss">
	@import '@/main.scss';

	.nodata {
		display: flex;
		flex-direction: column;
	}

	.scoreinfo {
		display: flex;
		flex-direction: row; //水平排列
		justify-content: space-between; //纵向均匀排列
		flex-wrap: wrap;
	}

	.consumetext {
		font-size: 13px;
		margin-top: 4rpx;
	}

	.consumeitem {
		display: flex;
		flex-direction: row; //水平排列
		justify-content: flex-start;
		width: 100%;
		flex-wrap: wrap;
		margin-top: 4rpx;
	}

	.custtitle {
		font-size: 26rpx;
		margin-right: 20rpx;
		margin-top: 2rpx;
		color: #8a8a8a;
	}

	.title {
		display: flex;
		margin-bottom: 20rpx;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}

	.twice {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.titletext {
		margin-right: 20rpx;
		font-weight: 600;
	}

	.accounttext {
		display: flex;
		border: 1px solid #2bc1e6;
		color: #2bc1e6;
		border-radius: 5rpx;
		font-size: 11px;
		justify-content: center;
		text-align: center;
		align-items: center;
		padding: 3px;
		margin-left: 20rpx;
	}

	.numadd {
		display: flex;
		justify-content: flex-end;
		color: #43c187;
	}

	.numcut {
		display: flex;
		justify-content: flex-end;
		color: #d81e06;
	}

	.navigation {
		display: flex;
		width: 100%;
		flex-direction: column;
		background: #F2F2F2;
	}

	.main-view {
		flex: 1;
		flex-direction: column;
		background-color: #f2f2f2;
	}

	.m-card-input-view2 {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 80rpx;
		background: $uni-bg-color-inverse;
		box-sizing: border-box;
		border-bottom: 1rpx solid #EEEEEE;
		padding-left: 0px;
		justify-content: flex-start; //纵向均匀排列
	}

	.m-card-input-title2 {
		width: 85rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}

	.m-title-text2 {
		font-size: $uni-font-size-level3;
		font-family: $uni-font-family;
		font-weight: $uni-font-weight-level1;
		color: $uni-text-color-title;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.time-view {
		display: flex;
		flex-direction: column;
		margin-top: 5rpx;
	}
</style>